import React, { PureComponent } from 'react';
import { Card, Spin, message, Button } from 'antd';
import moment from 'moment';
import { connect } from 'dva';
import router from 'umi/router';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import FooterToolbar from '@/components/FooterToolbar';
import DescriptionList from '@/components/DescriptionList';
import downloadFile, { getFileName } from '@/utils/utils';
import { checkPermissions } from '@/utils/authority';
import judgeAuthority from '../../SocialManage/judgeAuthority';

const { Description } = DescriptionList;
@connect(
  ({ loading, rebate: { empBaseInfoVo, empSendInfoVo, insRefundInfo, accuRefundInfo } }) => ({
    empBaseInfoVo,
    empSendInfoVo,
    insRefundInfo,
    accuRefundInfo,
    loading: loading.models.rebate,
  })
)
class Detail extends PureComponent {
  state = {};

  componentDidMount() {
    const {
      dispatch,
      location: {
        query: { refundInfoId, type },
      },
    } = this.props;
    if (Number(type) === 2) {
      dispatch({
        type: 'rebate/fetchAccuRefundInfo',
        payload: { refundInfoId },
      });
    } else {
      dispatch({
        type: 'rebate/fetchInsRefundInfo',
        payload: { refundInfoId },
      });
    }
  }

  Ehistory = () => {
    message.warning('努力开发中。。。');
  };

  downLoad = item => {
    const file = item.split('|');
    downloadFile({ fileId: file[0], fileName: getFileName(file[1]) });
  };
  // 获取附件展示文字

  getAffixInfo = affix =>
    affix.split(',').map(item => {
      const affixItem = item.split('|')[1];
      const affixName = getFileName(affixItem);
      return (
        <p>
          <a onClick={() => this.downLoad(item)}>{affixName}</a>
        </p>
      );
    });

  render() {
    const {
      empSendInfoVo,
      empBaseInfoVo,
      insRefundInfo,
      accuRefundInfo,
      location,
      loading,
    } = this.props;
    // const { loading } = this.state;
    const refundInfo = JSON.stringify(insRefundInfo) === '{}' ? accuRefundInfo : insRefundInfo;
    const affixInfo = refundInfo.affix ? this.getAffixInfo(refundInfo.affix) : '--';
    const authority = judgeAuthority(location);
    const judgingSource = () => {
      let source = 1;
      if (
        checkPermissions([
          'business:insRefundInfo:execPayCompInsRefundInfo',
          'business:accuRefundInfo:execPayCompAccuRefundInfo',
        ]) &&
        authority !== 'socaccmanagereceive'
      ) {
        source = 1;
      }
      if (
        checkPermissions([
          'business:insRefundInfo:execPayCompInsRefundInfo',
          'business:accuRefundInfo:execPayCompAccuRefundInfo',
        ]) &&
        authority === 'socaccmanagereceive'
      ) {
        source = 2;
      }
      if (
        checkPermissions([
          'business:insRefundInfo:execClaimInsRefundInfo',
          'business:accuRefundInfo:execClaimAccuRefundInfo',
        ])
      ) {
        source = 3;
      }
      return source;
    };
    return (
      <Spin spinning={loading} delay={0}>
        <div>
          <PageHeaderWrapper>
            <Card
              title={
                <span style={{ fontWeight: 'bolder' }} id="sendInfor">
                  基本信息
                </span>
              }
              bordered={false}
            >
              <DescriptionList>
                <Description term="员工姓名">
                  {empBaseInfoVo.empName ? empBaseInfoVo.empName : '--'}
                </Description>
                <Description term="证件类型">
                  {empBaseInfoVo.certTypeName ? empBaseInfoVo.certTypeName : '--'}
                </Description>
                <Description term="证件号">
                  {empBaseInfoVo.certNo ? empBaseInfoVo.certNo : '--'}
                </Description>
                <Description term="性别">
                  {empBaseInfoVo.genderName ? empBaseInfoVo.genderName : '--'}
                </Description>
                {authority === 'socaccmanagereceive' ? null : (
                  <Description term="国籍">
                    {empBaseInfoVo.nationName ? empBaseInfoVo.nationName : '--'}
                  </Description>
                )}
                <Description term="出生日期">
                  {empBaseInfoVo.birthDate
                    ? moment(empBaseInfoVo.birthDate).format('YYYY-MM-DD')
                    : null}
                </Description>
                <Description term="电话">
                  {empBaseInfoVo.mobile ? empBaseInfoVo.mobile : '--'}
                </Description>
                <Description term="员工邮箱">
                  {empBaseInfoVo.email ? empBaseInfoVo.email : '--'}
                </Description>
                <Description term="客户名称">
                  {empSendInfoVo.custName ? empSendInfoVo.custName : '--'}
                </Description>
                {authority === 'socaccmanagereceive' ? (
                  <Description term="签约方">
                    {empBaseInfoVo.nationName ? empBaseInfoVo.nationName : '--'}
                  </Description>
                ) : null}
                <Description term="所属客服">
                  {empSendInfoVo.blngCs ? empSendInfoVo.blngCs : '--'}
                </Description>
              </DescriptionList>
            </Card>
            {/* <h3>业务信息</h3> */}
            <Card
              title={
                <span style={{ fontWeight: 'bolder' }} id="sendInfor">
                  业务信息
                </span>
              }
              bordered={false}
            >
              <DescriptionList>
                <Description term="服务类型">
                  {refundInfo.serTypeIdName ? refundInfo.serTypeIdName : '--'}
                </Description>
                <Description term="是否有返款">
                  {refundInfo.refundFlagName ? refundInfo.refundFlagName : '--'}
                </Description>
                <Description term="收款方信息">
                  {refundInfo.payeeName ? refundInfo.payeeName : '--'}
                </Description>
                <Description term="收款方银行账号">
                  {refundInfo.payeeBankcardNo ? refundInfo.payeeBankcardNo : '--'}
                </Description>
                <Description term="开户行信息">
                  {refundInfo.payeeBankOfDepo ? refundInfo.payeeBankOfDepo : '--'}
                </Description>
              </DescriptionList>
            </Card>
            <Card
              title={
                <span style={{ fontWeight: 'bolder' }} id="sendInfor">
                  返款信息
                </span>
              }
              bordered={false}
            >
              <DescriptionList>
                <Description term="返款记录添加时间">
                  {refundInfo.creTime
                    ? moment(refundInfo.creTime).format('YYYY-MM-DD HH:mm')
                    : '--'}
                </Description>
                <Description term="返款记录添加人">
                  {refundInfo.creName ? refundInfo.creName : '--'}
                </Description>
                {judgingSource() === 3 && (
                  <Description term="来源">
                    {refundInfo.sourceName ? refundInfo.sourceName : '--'}
                  </Description>
                )}
                {judgingSource() === 2 && (
                  <Description term="来源">
                    {refundInfo.sourceName ? refundInfo.sourceName : '--'}
                  </Description>
                )}
                <Description term="报销金额（元）">
                  {refundInfo.reimbAmt ? refundInfo.reimbAmt.toFixed(2) : '--'}
                </Description>
                <Description term="本次返款金额">
                  {refundInfo.refundAmt ? refundInfo.refundAmt.toFixed(2) : '--'}
                </Description>
                <Description term="返款备注">
                  {refundInfo.remark ? refundInfo.remark : '--'}
                </Description>

                <Description term="凭证">{affixInfo}</Description>
                <Description term="确认到款人员">
                  {refundInfo.claimName ? refundInfo.claimName : '--'}
                </Description>
                <Description term="确认到款时间">
                  {refundInfo.claimDate
                    ? moment(refundInfo.claimDate).format('YYYY-MM-DD HH:mm')
                    : '--'}
                </Description>
                <Description term="确认支付人员">
                  {refundInfo.payName ? refundInfo.payName : '--'}
                </Description>
                <Description term="确认支付时间">
                  {refundInfo.payDate
                    ? moment(refundInfo.payDate).format('YYYY-MM-DD HH:mm')
                    : '--'}
                </Description>
              </DescriptionList>
            </Card>
            <FooterToolbar style={{ width: '100%' }}>
              <Button
                onClick={() => {
                  router.goBack();
                }}
              >
                返回
              </Button>
            </FooterToolbar>
          </PageHeaderWrapper>
        </div>
      </Spin>
    );
  }
}

export default Detail;
